<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app" style="width:50%;margin:30px auto;">

        <div v-if="success">
            <h2 style="color: cadetblue">欢迎：{{user.name}} &nbsp;&nbsp; <a href="javascript:void(0)" @click="logout">登出</a></h2>
        </div>

        <div v-if="!success">
            <h1 align="center">登录界面</h1>
            <el-form ref="form" :model="usermodel" label-width="80px">
                <el-form-item label="姓名">
                    <el-input placeholder="请输入姓名" v-model="usermodel.name"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input placeholder="请输入密码" v-model="usermodel.pwd" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                usermodel:{
                    name:'',
                    pwd:'',
                },
                success:false,
                user:{}
            },
            methods:{
                login(){
                    axios.post('login' , this.usermodel)
                        .then(response=>{
                            console.log(response)
                            let msg = response.data.msg
                            let code = response.data.code

                            if(code==200){
                                //登录成功后的user信息
                                this.user = response.data.data
                                this.success = true
                                this.$message({showClose: true,message: msg,type: 'success'});
                            }else if(code==455){
                                this.$message({showClose: true,message: msg,type: 'error'});
                            }
                        })
                        .catch(error=>{
                            console.log(error)
                        })
                },
                logout(){
                    this.$message({showClose: true,message: "成功登出",type: 'success'});
                    this.user = {}
                    this.usermodel = {name:'', pwd:''}
                    this.success = false
                }
            }
        })
    </script>
</body>

</html>